<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-16 15:01:18
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-20 16:51:27
-->
<template>
  <ActionTable :showAdd="false">
    <div class="screen-box">
      <a-form layout="inline" :model="screenData" @submit.prevent="loadData">
        <a-form-item>
          <a-input v-model:value="screenData.realName" placeholder="姓名" />
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="screenData.idCard" placeholder="证件号" />
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="screenData.phone" placeholder="电话" />
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="screenData.stk" placeholder="神通卡号" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">搜索</a-button>
        </a-form-item>
      </a-form>
    </div>
  </ActionTable>
  <a-table
    :columns="columns"
    :row-key="(record) => record.id"
    :data-source="state.touristOfData"
    :pagination="state.pagination"
    :loading="state.loading"
    @change="handleTableChange"
  >
  </a-table>
</template>
<script lang="ts" setup>
import { TableProps } from "ant-design-vue";
import { onMounted, reactive } from "vue";
import { paginationToQuery, proxyFilterEmptyValues } from "@/utils/common";
import { useRoute } from "vue-router";
import { selectTouristByExample } from "@/api/user/tourist";
const route = useRoute();

const columns = [
  {
    dataIndex: "id",
    title: "ID",
    key: "id",
    align: "center",
  },
  {
    dataIndex: "realName",
    title: "姓名",
    key: "realName",
    align: "center",
  },
  {
    dataIndex: "idCard",
    title: "证件号",
    key: "idCard",
    align: "center",
  },
  {
    dataIndex: "phone",
    title: "电话",
    key: "phone",
    align: "center",
  },
  {
    dataIndex: "createTime",
    title: "注册时间",
    key: "createTime",
    align: "center",
  },
];
const state = reactive({
  loading: true,
  touristOfData: <API.ListItem>[],
  pagination: {
    pageSize: 10,
    current: 1,
    total: 0,
    showTotal: (total) => `总${total}条`,
  },
});

const screenData = reactive<API.UserItem>({
  realName: "",
  idCard: "",
  phone: "",
  stk: "",
  thirdUniqueAccount: "",
});

const loadData = async () => {
  const { seachList, seachTotal } = await selectTouristByExample(
    proxyFilterEmptyValues(screenData),
    paginationToQuery(state.pagination)
  );
  state.touristOfData = seachList;
  state.pagination.total = seachTotal;
  state.loading = false;
};

const handleTableChange: TableProps["onChange"] = (page) => {
  state.pagination.current = page.current!;
  loadData();
};

onMounted(() => {
  screenData.thirdUniqueAccount = route.params.thirdUniqueAccount;
  loadData();
});
</script>
